<template>
  <div>
    <h3>房型增加</h3>
    {{ info }}
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">房型名称</td>
          <td><input type="text" v-model="info.HouseTypeName" /></td>
        </tr>
        <tr>
          <td align="right">房型图片</td>
          <td>
            <input type="file" @change="img" />
            <img
              :src="info.Photo"
              width="100"
              height="100"
              v-if="info.Photo != ''"
            />
          </td>
        </tr>
        <tr>
          <td align="right">房型面积</td>
          <td><input type="text" v-model="info.Area" /></td>
        </tr>
        <tr>
          <td align="right">是否有窗</td>
          <td>
            <input type="radio" name="win" :value="1" v-model="info.IsWin" />是
            <input type="radio" name="win" :value="0" v-model="info.IsWin" />否
          </td>
        </tr>
        <tr>
          <td align="right">最多入住人数</td>
          <td><input type="text" v-model="info.PepleCount" /></td>
        </tr>
        <tr>
          <td align="right">房型价格</td>
          <td><input type="text" v-model="info.Money" /></td>
        </tr>
        <tr>
          <td align="right">房型状态</td>
          <td>
            <input
              type="radio"
              name="state"
              :value="1"
              v-model="info.State"
            />发布
            <input
              type="radio"
              name="state"
              :value="0"
              v-model="info.State"
            />不发布
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="确定"
              class="btn btn-primary"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

//增加房型时需要向后端传递的数据
let info: any = reactive({
  HouseTypeName: '',
  Photo: '',
  Area: '',
  IsWin: 1,
  PepleCount: '',
  Money: '',
  State: 1,
});

//图片上传
const img = (e: any) => {
  info.Photo = '';
  //1.获取上传的文件
  let obj = e.target.files[0];
  let f = new FormData();
  f.append('file', obj);
  //2.发送网络请求
  axios({
    url: '/api/Uploads/UploadImg',
    method: 'post',
    data: f,
  })
    .then((res) => {
      console.log(res);
      if (res.data == '不是图片') {
        alert('您上传的不是图片');
        return;
      }

      if (res.data == '大于2M') {
        alert('您上传的图片大于2M');
        return;
      }

      info.Photo = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//增加
const ok = () => {
  //1.有效性验证
  //房型不能为空  2-20个汉字  [\u4e00-\u9fa5] 表示任意一个汉字
  if (info.HouseTypeName == '') {
    alert('房型名称不能为空');
    return;
  }
  let reg = /^[\u4e00-\u9fa5]{2,20}$/;
  if (reg.test(info.HouseTypeName) == false) {
    alert('房型名称只能是2-20个汉字');
    return;
  }
  if (info.Photo == '') {
    alert('房型图片不能为空');
    return;
  }

  if (info.Area == '') {
    alert('房型面积不能为空');
    return;
  }
  let reg1 = /^[0-9]+(\.[0-9]+)?$/;
  if (reg1.test(info.Area) == false) {
    alert('房型面积只能是正数');
    return;
  }

  if (info.PepleCount == '') {
    alert('最多入住人数不能为空');
    return;
  }

  let reg2 = /^[0-9]+$/;
  if (reg2.test(info.PepleCount) == false) {
    alert('最多入住人数只是正整数');
    return;
  }

  if (info.Money == '') {
    alert('房型价格不能为空');
    return;
  }

  if (reg1.test(info.Money) == false) {
    alert('房型价格只能是正数');
    return;
  }

  //判断价格只能是0-5000之间的数字

  if (info.Money == '') {
    alert('价格不能为空');
    return;
  }

  if (isNaN(info.Money) == true) {
    alert('只能输入数字');
    return;
  }

  if (info.Money < 0 || info.Money > 5000) {
    alert('价格只能是0-5000之间的数字');
    return;
  }

  //2.发送网络请求
  axios({
    url: '/api/Houses/HouseTypeAdd',
    method: 'post',
    data: info,
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('添加成功');
        router.push('/houseTypeList');
      } else if (res.data == -1) {
        alert('房型名称重复');
        return;
      } else {
        alert('添加失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
